<%@ taglib prefix="portlet" uri="http://java.sun.com/portlet" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<portlet:defineObjects/>

<link href="/Todo-portlet/css/todo.css" rel="stylesheet" type="text/css" />

<portlet:actionURL var="actionUrl">
    <portlet:param name="action" value="editTodo"/>
</portlet:actionURL>

<portlet:renderURL var="todosUrl">
    <portlet:param name="action" value="todos"/>
</portlet:renderURL>

<table width="100%">
    <tr><td align="right" valign="middle">
            <div id="menu">
                &#091;<a href="${todosUrl}">Cancel</a>&#093;
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <form:form method="POST" action="${actionUrl}" commandName="command">
                <form:hidden path="id" />
                <form:hidden path="owner" />
                <table>
                    <tr>
                        <td><b>Title:</b>&nbsp;</td>
                        <td>
                            <form:input path="title" size="30" maxlength="50"/>
                            &nbsp;<form:errors path="title" cssClass="error"/>
                        </td>
                    </tr>
                    <tr>
                        <td><b>Status:</b>&nbsp;</td>
                        <td>
                            <form:checkbox path="done"/>
                        </td>
                    </tr>
                     <tr>
                        <td><b>Priority:</b>&nbsp;</td>
                        <td>
                            <form:select path="priority">
                                <form:option label="High" value="1"/>
                                <form:option label="Medium" value="2"/>
                                <form:option label="Low" value="3"/>
                            </form:select>
                        </td>
                    </tr>
                    <tr>
                        <td><b>Creator:</b>&nbsp;</td>
                        <td>
                            <form:input path="ownerScreenName" size="30" readonly="true"/>
                        </td>
                    </tr>
                    <tr>
                        <td><b>Creation date:</b>&nbsp;<br/>(yyyy-MM-dd)&nbsp;</td>
                        <td>
                            <form:input path="creationDate" size="30" id="creationDate"/> 
                            &nbsp;<form:errors path="creationDate" cssClass="error"/>
                            <script type="text/javascript">
                                jQuery(document).ready(
                                function() {
                                    jQuery('#creationDate').datepicker({dateFormat: 'yy-mm-dd'});
                                }
                                );
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <td><b>Due date:</b>&nbsp;<br/>(yyyy-MM-dd)&nbsp;</td>
                        <td>
                            <form:input path="dueDate" size="30" id="dueDate"/>
                            &nbsp;<form:errors path="dueDate" cssClass="error"/>
                            <script type="text/javascript">
                                jQuery(document).ready(
                                function() {
                                    jQuery('#dueDate').datepicker({dateFormat: 'yy-mm-dd'});
                                }
                                );
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <td><b>Category:</b>&nbsp;</td>
                        <td>
                            <form:select path="category.id" items="${categories}" itemLabel="name" itemValue="id"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top"><b>Description:</b>&nbsp;</td>
                        <td>
                            <form:textarea path="description" cols="27" rows="5"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <br/>
                            <input type="submit" value="Save">&nbsp;
                        </td>
                    </tr>
                </table>
            </form:form>
       </td>
    </tr>
</table>